<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./header.css" />
    <link rel="stylesheet" href="./content.css" />
</head>

<body>
    <header id="main-header" class="layout-header">
        <div class="layout-logo">
            <span class="logo-icon"><i class="fas fa-traffic-light"></i></span>
            <span class="logo-text">干线协调优化平台</span>
        </div>

        <div class="header-spacer"></div>

        <nav class="header-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-tachometer-alt"></i>
                <span>概览</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-chart-line"></i>
                <span>数据分析</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-cog"></i>
                <span>配置</span>
            </a>
        </nav>

        <div class="header-widgets">
            <div class="weather-widget">
                <span class="weather-icon"><i class="fas fa-sun"></i></span>
                <span class="weather-text">晴 28°C</span>
            </div>
            <div class="sync-widget">
                <span class="sync-icon"><i class="fas fa-sync-alt"></i></span>
                <span class="sync-text">实时同步中</span>
            </div>
            <div class="user-profile">
                <span class="user-icon"><i class="fas fa-user-circle"></i></span>
                <span class="user-name">管理员</span>
            </div>
        </div>
    </header>

    <main id="main-content" class="layout-content">
        <!-- 侧边栏 -->
        <aside class="layout-sidebar">
            <nav class="sidebar-nav">
                <a href="#" class="sidebar-item active">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>路口监控</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i class="fas fa-road"></i>
                    <span>干线协调</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>流量分析</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>事件报警</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i class="fas fa-history"></i>
                    <span>历史数据</span>
                </a>
            </nav>
        </aside>

        <!-- 内容区域 -->
        <div class="content-area">
            <div class="map-container">
                <!-- 这里将来可以放置地图 -->
                <div class="map-placeholder">
                    <i class="fas fa-map-marked-alt"></i>
                    <h2>地图展示区</h2>
                    <p>实时路况监控</p>
                </div>
            </div>

            <div class="data-panel">
                <div class="data-card">
                    <h4>总流量</h4>
                    <p>12,345 辆/小时</p>
                </div>
                <div class="data-card">
                    <h4>平均延误</h4>
                    <p>58 秒</p>
                </div>
                <div class="data-card">
                    <h4>畅通指数</h4>
                    <p>85%</p>
                </div>
            </div>
        </div>
    </main>
</body>

</html>